<template>
    <div>
        username：<input type="text" v-model="loginForm.username" style="width: 200px"/><br>
        password：<input type="password" v-model="loginForm.password" style="width: 200px"/><br>
        <button @click="login">登陆</button>
        <button @click="logout">注销</button>
        <br>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: 'admin'
                }
            }
        },
        methods: {
            login() {
                this.$store.dispatch('login', this.loginForm)
                    .then(() => {
                        //登录成功之后重定向到首页
                        this.$router.push({path: '/'});
                    }).catch(err => {
                    //登录失败提示错误
                    alert(err)
                });
            },
            logout() {
                sessionStorage.removeItem("token");
                if (sessionStorage.getItem("token") === "") {
                    console.log("注销成功");
                    this.$router.go(0)
                } else {
                    console.log("未登录")
                }
            }
        }
    }
</script>
